﻿<template>
  <a-drawer
    title="编辑VIP用户订单信息"
    placement="right"
    :closable="true"
    :maskClosable="true"
    @close="onDrawerClose"
    :visible="visible"
    :width="800"
    :keyboard="true"
    :getContainer="false">
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-card id="CodeInfo" title="编码信息">
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="排序"
            prop="Sort"
            class="formItem"
          >
            <a-input-number
              style="width: 580px"
              v-model="entity.Sort"
              autocomplete="off"
              placeholder="越小越靠前"
              min="0"
              :precision="0"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="订单类型"
            prop="OrderType">
            <a-select style="width: 580px" default-value="0" v-model="entity.OrderType">
              <a-select-option :key="0" :value="0"><span style="font-weight: bold">算运力</span></a-select-option>
              <a-select-option :key="1" :value="1"><span style="font-weight: bold">查井道</span></a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="订单状态"
            prop="Status"
          >
            <a-select style="width: 580px" default-value="1" v-model="entity.Status">
              <a-select-option
                :key="1"
                :value="1"
              ><span style="color: red; font-weight: bold">计算中</span>
              </a-select-option>
              <a-select-option
                :key="2"
                :value="2"
              ><span style="color: green; font-weight: bold">已完成</span>
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="编码"
            prop="Code"
            class="formItem"
          >
            <a-input style="width: 580px" v-model="entity.Code" autocomplete="off" placeholder="自定义编码" />
          </a-form-model-item>
        </a-card>
        <p></p>
        <a-card id="BaseInfo" title="订单主要信息">
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="项目名称"
            prop="ProjectName">
            <a-input style="width: 580px" v-model="entity.ProjectName" autocomplete="off" placeholder="项目名称" />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="建筑类型"
            prop="BuildingType">
            <a-input style="width: 580px" v-model="entity.BuildingType" autocomplete="off" placeholder="建筑类型" />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="项目城市"
            prop="City">
            <a-input style="width: 580px" v-model="entity.City" autocomplete="off" placeholder="项目城市" />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="总建筑面积"
            prop="TotalArea">
            <a-input style="width: 580px" v-model="entity.TotalArea" autocomplete="off" placeholder="总建筑面积" />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="标准建筑面积"
            prop="StandardArea">
            <a-input style="width: 580px" v-model="entity.StandardArea" autocomplete="off" placeholder="标准建筑面积" />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="建筑总高度"
            prop="Height">
            <a-input style="width: 580px" v-model="entity.Height" autocomplete="off" placeholder="建筑总高度" />
          </a-form-model-item>

        </a-card>
        <p></p>
        <a-card id="FormatInfo" title="业态信息">
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="业态详情"
            prop="Formats">
            <a-input
              readOnly
              style="width: 580px"
              v-model="entity.Formats"
              autocomplete="off"
              placeholder="存放选择的业态及下辖选项的Json" />
          </a-form-model-item>
        </a-card>
        <p></p>
        <a-card id="FileAndRemarkInfo" title="文件及备注信息">
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="上传文件Url"
            prop="FilesUrl">
            <a-input readOnly style="width: 580px" v-model="entity.FilesUrl" autocomplete="off" placeholder="上传文件Url" />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="报告文件地址"
            prop="ReportUrl">
            <a-input
              readOnly
              style="width: 580px"
              v-model="entity.ReportUrl"
              autocomplete="off"
              aria-readonly="true"
              placeholder="生成报告文件地址" />
            <a-button type="primary" icon="plus" @click="UploadFile()">上传文件</a-button>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 100px;float:left;' }"
            label="备注"
            prop="Remark">
            <a-input style="width: 580px" v-model="entity.Remark" autocomplete="off" placeholder="备注" />
          </a-form-model-item>
        </a-card>
        <p style="height: 50px"></p>
      </a-form-model>
    </a-spin>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'center',
        zIndex: 1
      }"
    >
      <a-button style="margin-right: 100px" @click="onDrawerClose">取消</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
    <upload-file-form
      ref="uploadFileForm"
      :parentObj="this"
      leading="/Base_VIPUser/Base_VIPUserOrder/UploadFileByForm"
    ></upload-file-form>
  </a-drawer>
</template>

<script>
import UploadFileForm from '@/components/FileOperations/UploadFileForm'

export default {
  props: {
    parentObj: Object
  },
  components: {
    UploadFileForm
  },
  data () {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      loading: false,
      entity: {},
      uploadFileURL: '',
      rules: {},
      title: '',
      queryParam: {}
    }
  },
  methods: {
    init () {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openDrawer (id) {
      this.init()
      if (id) {
        this.loading = true
        this.$http.post('/Base_VIPUser/Base_VIPUserOrder/GetTheData', { id: id }).then(resJson => {
          this.loading = false
          this.entity = resJson.Data
        })
      }
    },
    onDrawerClose () {
      this.visible = false
    },
    handleSubmit () {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/Base_VIPUser/Base_VIPUserOrder/SaveData', this.entity).then(resJson => {
          this.loading = false
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false
            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    UploadFile () {
      this.uploadFileURL = ''
      this.$refs.uploadFileForm.openForm('文件上传 -->>请选择上传的报告文件')
    },
    UpdateSaveFileUrl () {
      this.loading = true
      this.entity.ReportUrl = this.uploadFileURL
      if (this.entity.Id) {
        this.queryParam = [
          {
            Condition: 'ReportUrl',
            Keyword: this.entity.ReportUrl
          },
          {
            Condition: 'Status',
            Keyword: '2'
          }]
        console.log(this.queryParam)
        this.$http
          .post('/Base_VIPUser/Base_VIPUserOrder/UpdateDataByConditions', {
            Id: this.entity.Id,
            Search: this.queryParam,
            ...this.filters
          })
          .then(resJson => {
            if (resJson.Success) {
              this.$message.success('报告文件地址保存成功!')
              this.visible = false
              this.parentObj.getDataList()
            } else {
              this.$message.error(resJson.Msg)
            }
          })
      }
      this.loading = false
    }
  }
}
</script>
